<template>
	<div>
		<navigationBar :backType="2" navigationTitle="选择服务师" />

		<view
			class="wrap-search flex align-center just-center"
			:style="'top:' + navigationHeight + 'px'"
		>
			<view class="search-bg flex align-center">
				<image
					class="img"
					:src="getImageURL('technician/choose/search.png')"
				/>
				<view class="line"></view>

				<input
					class="input"
					type="text"
					placeholder="请输入服务师姓名"
					v-model="keywords"
				/>
			</view>
		</view>

		<view class="wrap paddingBottom">
			<view class="wrap-list">
				<block v-for="(item, index) in list" :key="index">
					<view
						class="item flex align-center"
						@click="onChoose(index)"
					>
						<view class="choose">
							<image
								v-if="item.select"
								:src="
									getImageURL(
										'technician/choose/choose_select.png'
									)
								"
							/>

							<image
								v-else
								:src="
									getImageURL(
										'technician/choose/choose_normal.png'
									)
								"
							/>
						</view>

						<view class="right flex align-center just-between">
							<image class="avatar" :src="item.avatar" />

							<view class="nickname f-30">
								{{ item.title }}
							</view>

							<view class="flex align-center">
								<image
									class="location-img"
									:src="
										getImageURL(
											'technician/choose/location.png'
										)
									"
								/>
								<view class="location">
									{{ item.location }}
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>

		<view class="wrap-footer safe-area flex align-center just-center">
			<view class="choose-btn fb-28" @click.stop="onSure">
				确认选择
			</view>
		</view>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				navigationHeight: this.$navigationHeight,

				keywords: "",

				list: [
					{
						title: "昵称1",
						avatar: "",
						location: "200米",
						select: false,
					},
					{
						title: "昵称2",
						avatar: "",
						location: "300米",
						select: false,
					},
					{
						title: "昵称3",
						avatar: "",
						location: "400米",
						select: false,
					},
					{
						title: "昵称4",
						avatar: "",
						location: "500米",
						select: false,
					},
					{
						title: "昵称5",
						avatar: "",
						location: "600米",
						select: false,
					},
					{
						title: "昵称6",
						avatar: "",
						location: "700米",
						select: false,
					},
					{
						title: "昵称7",
						avatar: "",
						location: "800米",
						select: false,
					},
					{
						title: "昵称8",
						avatar: "",
						location: "900米",
						select: false,
					},
					{
						title: "昵称9",
						avatar: "",
						location: "1000米",
						select: false,
					},
					{
						title: "昵称10",
						avatar: "",
						location: "1100米",
						select: false,
					},
				],
			};
		},
		onLoad() {},
		methods: {
			/**
			 * 选择
			 */
			onChoose(index) {
				this.list.forEach((item, i) => {
					item.select = i === index;
				});
			},
			/**
			 * 确认选择
			 */
			onSure() {
				const index = this.list.findIndex((item) => item.select);
				if (index === -1) {
					this.$st.show("请选择服务师");
					return;
				}

				uni.$emit("chooseTechnician", this.list[index]);
				uni.navigateBack();
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap-search {
		position: sticky;
		left: 0;
		width: 100%;
		height: 100rpx;
		z-index: 10;
		background-color: white;
		overflow: hidden;

		.search-bg {
			width: 710rpx;
			height: 60rpx;
			background-color: $bg-color;
			border-radius: 10rpx;
			overflow: hidden;

			.img {
				margin-left: 22rpx;
				width: 27rpx;
				height: 25rpx;
			}
			.line {
				margin-left: 14rpx;
				width: 2rpx;
				height: 32rpx;
				background-color: #b0b0b0;
			}
			.input {
				margin-left: 14rpx;
				flex: 1;
				margin-right: 20rpx;
				color: $title-color;
			}
			.place {
				color: #b0b0b0;
			}
		}
	}

	.wrap {
		--bottom-height: 140rpx;

		.wrap-list {
			padding: 20rpx 0;
			width: 100%;
			overflow: hidden;

			.item {
				width: 100%;
				overflow: hidden;
				margin-bottom: 20rpx;
				padding: 0rpx 20rpx;
				box-sizing: border-box;

				&:last-child {
					margin-bottom: 0;
				}

				.choose {
					width: 38rpx;
					height: 38rpx;

					> image {
						width: 100%;
						height: 100%;
					}
				}
				.right {
					margin-left: 20rpx;
					flex: 1;
					background-color: white;
					padding: 30rpx 20rpx 30rpx 30rpx;
					box-sizing: border-box;
					border-radius: 20rpx;
					overflow: hidden;

					.avatar {
						width: 98rpx;
						height: 98rpx;
						border-radius: 50%;
						overflow: hidden;
						background-color: red;
					}
					.nickname {
						margin-left: 30rpx;
						flex: 1;
						color: $title-color;
					}
					.location-img {
						width: 24rpx;
						height: 28rpx;
					}
					.location {
						margin-left: 16rpx;
						color: $title-color;
					}
				}
			}
		}
	}

	.wrap-footer {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 128rpx;
		background-color: white;
		z-index: 10;

		.choose-btn {
			width: 698rpx;
			height: 94rpx;
			line-height: 94rpx;
			text-align: center;
			color: $bg-text-color;
			background: $grad-theme-color;
			border-radius: 50rpx;
			overflow: hidden;
		}
	}
</style>
